<template>
  <div class="container">
    <img src="../../../../assets/image/zljc.png" width="40%" />
    <div id="c-b" style="width: 55%; height: 700px; margin-top: 20px"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
export default {
  created() {
    setTimeout(() => {
      var chartA = Highcharts.chart("c-b", {
        chart: {
          type: "line",
          backgroundColor: "#0000",
        },
        title: {
          text: "基于疲劳累积损伤度的结构健康诊断",
          style: {
            color: "#000",
            fontSize: "24px",
          },
        },
        xAxis: {
          // tickInterval: 5,
          title: {
            text: "",
            style: {
              color: "#2099D3",
            },
          },
          labels: {
            style: {
              color: "#000",
              fontSize: "16px",
            },
          },
          categories: [
            "测点1",
            "测点2",
            "测点3",
            "测点4",
            "测点5",
            "测点6",
            "测点7",
            "测点8",
            "测点9",
            "测点10",
            "测点11",
          ],
        },
        yAxis: {
          title: {
            text: "",
            style: {
              color: "#000",
            },
          },
          labels: {
            style: {
              color: "#000",
              fontSize:'16px'
            },
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true,
              style:{
                fontSize:'16px',
                fontWeight:'400'
              }
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
          },
        },
        series: [
          {
            name: "<b style='font-size:16px'>疲劳累积损伤度</b>",
            data: [
              0.44, 0.37, 0.41, 0.41, 0.33, 0.12, 0.29, 0.38, 0.3, 0.48, 0.44,
            ],
          },
          {
            name: "<b style='font-size:16px'>健康阈值</b>",
            data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
          },
        ],
        colors:[
          '#4472C4','#ED7D31'
        ],
      });
    }, 0);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
</style>
